<!--
 * @Author: zhang_gen_yuan
 * @Date: 2023-08-08 14:01:50
 * @LastEditTime: 2023-09-19 11:41:32
 * @Descripttion: 
-->
<template>
  <h2>
    <p>1. npm install buttons-generator </p>
    <p>2. import "buttons-generator/dist/bundle.css" </p>
    <p>3. 相中哪个 点击那个按钮即可复制类名</p>
  </h2>
  <div v-for="item in list" key="item.title">
    <h3>{{ item.title }}</h3>
    <button
      v-for="index in item.length"
      :class="item.class + index"
      @click="copy(item.class, index)"
    >
      button
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const list = ref([
  {
    title: "3d",
    class: "buttons-generator-3d--",
    length: 9,
  },
  {
    title: "gradient",
    class: "buttons-generator-gradient--",
    length: 9,
  },
  {
    title: "shadow-border",
    class: "buttons-generator-shadow-border--",
    length: 9,
  },
  {
    title: "retro",
    class: "buttons-generator-retro--",
    length: 9,
  },
  {
    title: "With shadow border (sliding effect)",
    class: "buttons-genarator-shadow-border-sliding--",
    length: 9,
  },
  {
    title: "Sliding effect (left to right)",
    class: "buttons-generator-sliding-left-to-right--",
    length: 9,
  },
  {
    title: "Sliding effect (right to left)",
    class: "buttons-generator-sliding-right-to-left--",
    length: 9,
  },
]);
const copy = (c:string, i:number) => {
  let input = document.createElement("input");
  input.value = "复制内容";
  document.body.appendChild(input);
  input.select();
  document.execCommand("Copy");
  input.style.display = "none";
  alert(c + i);
};
console.log()
</script>

<style>
button {
  margin: 10px;
}
</style>
